<template>
    <div >
        <div class="top">
            <div class="name">
                就诊人：<span>{{ZYMedicalRecord.hzxm}}</span>
                <span class="color ">{{ZYMedicalRecord.sfycy==='0'?'未出院':'已出院'}}</span>
                <!-- <span class="color cur">已出院</span> -->
                <a href="javascript:void(0)" @click="isShowbox = true"  class="fr" v-show="zyType == '已出院'">查看出院小结 <img src="../../assets/images/arrow-right.png" alt=""></a>
            </div>
            <div class="jzinfo">
                <p>入院日期：<span>{{ZYMedicalRecord.rysj}}</span></p>
                <p>住院号：<span>{{ZYMedicalRecord.zyh}}</span></p>
                <p>就诊医院：<span>{{ZYMedicalRecord.jzyy}}  </span></p>
                <p>科室：<span>{{ZYMedicalRecord.ksmc}}</span></p>
            </div>
            <!-- 住院中显示 -->
            <div class="fy" v-show="zyType != '已出院'" >
                <p><span class="colorgray">住院预交金：</span><span class="colorblue">2000.00</span>元</p>
                <p><span class="colorgray">余额：</span><span class="colorblue">500.00</span>元</p>
            </div>
            <!-- 已出院显示 -->
            <div class="jzfy" v-show="zyType == '已出院'">
                <div class="item">
                    <router-link :to="{path:'/zyxx/settlement',query:{}}">
                        <div class="left fl">
                            <img src="../../assets/images/￥.png" alt=""> 住院费用总计
                        </div>
                        <div class="right fr" >
                            <img src="../../assets/images/arrow-right.png" alt="">
                        </div>
                    </router-link>
                </div>
            </div>
            <!-- 出院小结 已出院显示 -->
            <div class="summary" v-if="isShowbox && zyType == '已出院' ">
                <div class="content">
                    <div class="title">出院病历小结<a href="javascript:void(0)"  @click="isShowbox = false">关闭</a></div>
                    <div class="introduction">
                        <div class="item">

                            病人信息：<span>{{ZYMedicalRecord.hzxm}}</span><span>{{xb}}</span><span>{{Cyxj.nl==null?"":Cyxj.nl}}岁</span>

                        </div>
                        <div class="item">

                            住院信息：<span>{{ZYMedicalRecord.ksmc}}</span>

                        </div>
                        <div class="item">
                            <p>
                                入院时间：<span>{{ZYMedicalRecord.rysj}}</span>
                            </p>
                            <p>
                                出院时间：<span>2{{ZYMedicalRecord.cysj}}</span>
                            </p>
                        </div>
                        <div class="item">
                            <p>
                                住院天数：<span>{{ZYMedicalRecord.zyts}}天</span>
                            </p>
                            <p>
                                住院号：<span>{{ZYMedicalRecord.zyh}}</span>
                            </p>
                        </div>
                    </div>
                    <div class="detail">
                        <p>
                            <span class="bj"></span>
                            <span>入院诊断</span>{{Cyxj.ryzd}}
                        </p>
                        <p>
                            <span class="bj"></span>
                            <span>入院情况</span>{{Cyxj.ryqk}}
                        </p>
                        <p>
                            <span class="bj"></span>
                            <span>诊疗经过</span> {{Cyxj.zlgc}}

                        </p>
                        <p>
                            <span class="bj"></span>
                            <span>出院诊断</span>{{Cyxj.cyzd}}
                        </p>
                        <p>
                            <span class="bj"></span>
                            <span>治疗结果</span>{{Cyxj.zljg}}
                        </p>
                        <p>
                            <span class="bj"></span>
                            <span>出院医嘱</span>{{Cyxj.cyyz}}
                        </p>
                        <p>
                            <span class="bj"></span>
                            <span>复查预约</span>1周
                        </p>

                    </div>
                </div>
            </div>
        </div>
        <!-- 已出院显示 -->
        <div class="main" v-show="zyType == '已出院'">
            <div class="tab-title">
                <div class="item" v-for="(item,index) in tab" :key="index" @click="tabchange(index,item.title)">
                    <span :class="index === curIndex?'cur':''">{{item.title}}</span>
                </div>
            </div>
            <swiper ref="mySwiper" >
                <swiper-slide>
                    <!-- 住院记录 -->
                    <div class="tab-main jjzl" >
                        <p>
                            <span>入院时间：</span> {{ZYMedicalRecord.rysj}}
                        </p>
                        <p>
                            <span>出院时间：</span> {{ZYMedicalRecord.cysj}}
                        </p>
                        <p>
                            <span>就诊卡号：</span>{{ZYMedicalRecord.tmkh}}
                        </p>
                        <p>
                            <span>卡类型：</span>{{ZYMedicalRecord.klx}}
                        </p>
                        <!--<p>-->
                        <!--<span>社保类型：</span>城镇医保-->
                        <!--</p>-->
                        <p>
                            <span>住院流水号：</span>{{ZYMedicalRecord.zyh}}
                        </p>
                        <p>
                            <span >诊断：</span>
                            <span>
                        {{IHDiagnosisDetail[0]}}
                        {{IHDiagnosisDetail[1]}}
                        </span>
                        </p>


                        <p class="color">
                            <span>住院状态：</span>已出院，住院{{ZYMedicalRecord.zyts}}天
                        </p>
                    </div>
                </swiper-slide>
                <swiper-slide>
                    <!-- 出院带药 -->
                    <div class="tab-main yyxx" >
                        <!--  公用组件table-->
                        <commonTable :listData="getLISReportParams"></commonTable>
                    </div>
                </swiper-slide>
                <swiper-slide>
                    <!-- 检验报告 -->
                    <div class="tab-main jybg" >
                        <!-- 检验报告公用组件 -->
                        <jyReport :listData="getLISReportParams"></jyReport>
                    </div>
                </swiper-slide>
                <swiper-slide>
                    <!-- 检查报告 -->
                    <div class="tab-main jcbg" v-show="curTab=='检查报告'">
                        <!-- 检查报告公用组件 -->
                        <jcReport :listData="jcReportParams"></jcReport>
                    </div>
                </swiper-slide>
            </swiper>




        </div>
        <!-- 数据仅供参考提示，hosName通过接口获得，在该组件赋值传给子组件，首页不需要传值，默认为空 -->
        <tips :hosName="hosName"></tips>
        <!-- 水印 -->
        <div class="watermark"></div>
    </div>
</template>

<script>
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    import {getLeaveHospitalSummaryApi, getZYMedicalRecordApi,getIHDiagnosisDetailApi,getLISReportApi} from '@/api/healthRecords'
    import tips from '@/components/tips.vue'
    import commonTable from '@/components/table'
    import jcReport from '@/components/jcReport'
    import jyReport from '@/components/jyReport'
    export default {
        name: 'zyxx',
        data () {
            return {
                ZYMedicalRecord: JSON.parse(localStorage.getItem('zyjbxx')),
                IHDiagnosisDetail:[],
                tab: [{
                    title: '住院记录'
                }, {
                    title: '出院带药'
                }, {
                    title: '检验报告'
                }, {
                    title: '检查报告'
                }],
                curIndex: 0,
                curTab: '住院记录',
                viewText: '明细查看',
                isShow: false,
                jyReport: [
                    //     {
                    //     title: '血常规-全血',
                    //     date: '2017-12-05 上午9：23',
                    //     isShow: false //当从接口或得检验报告数组后，给每个对象手动添加isShow=false，来控制详情展示
                    // }, {
                    //     title: '尿常规',
                    //     date: '2017-12-05 上午9：23',
                    //     isShow: false //当从接口或得检验报告数组后，给每个对象手动添加isShow=false，来控制详情展示
                    // }
                ], //检验报告

                //     {
                //     name: '【颈椎，正侧位】C1-2环枢关节',
                //     number: 'ZS849013',
                //     date: '2017-12-05  AM 11:13',
                //     isShow: false
                // }, {
                //     name: '【左脚】X射线',
                //     number: 'ZS849013',
                //     date: '2017-12-05  AM 11:13',
                //     isShow: false
                // }

                popupVisible: false,
                isShowbox:false,
                xb:JSON.parse(localStorage.getItem('jbxx')).xb,
                zyType: JSON.parse(localStorage.getItem('zyjbxx')).chuorzhu  ,//可以根据接口中的获得住院状态然后对该值进行赋值并根据不同的状态进行显示
                //可以根据接口中的获得住院状态然后对该值进行赋值并根据不同的状态进行显示
                hosName:JSON.parse(localStorage.getItem('zyjbxx')).jzyy,//医院名称
                IHDiagnosisDetailParams:{"yljgdm":"42502658000", "jzlsh":"0000768489"},//住院就诊记录参数
                // getLISReportParams:this.IHDiagnosisDetailParams,//住院检查列表参数
                getLISReportParams:{"yljgdm":"","jzlsh":"","name":"Zyxx"},//住院检查列表参数
                jcReportParams: {"yljgdm":"42502657201", "jzlsh":"1002567736","name":"Zyjl","name":"Zyxx"}, //传递给检查报告子组件的参数
                Cyxj:{}//出院小结返回值
            }
        },
        methods: {
            init() {
                this.getLISReportParams.yljgdm = JSON.parse(localStorage.getItem('zyjbxx')).yljgdm;
                this.getLISReportParams.jzlsh = JSON.parse(localStorage.getItem('zyjbxx')).jzlsh;

                this.jcReportParams.yljgdm = JSON.parse(localStorage.getItem('zyjbxx')).yljgdm;
                this.jcReportParams.jzlsh = JSON.parse(localStorage.getItem('zyjbxx')).jzlsh;

                this.IHDiagnosisDetailParams.yljgdm = JSON.parse(localStorage.getItem('zyjbxx')).yljgdm;
                this.IHDiagnosisDetailParams.jzlsh = JSON.parse(localStorage.getItem('zyjbxx')).jzlsh;
            },
            //1.住院就诊记录
            getIHDiagnosisDetail() {
                getIHDiagnosisDetailApi(JSON.stringify(this.IHDiagnosisDetailParams)).then(response => {
                    if (response.data.code == 1) {
                        var zyzd = [];
                        response.data.data.forEach(item => {
                            zyzd.push(item.zyzd)
                        })
                        this.IHDiagnosisDetail = zyzd
                    }
                })
            },
            //2.获取出院小结信息
            getLeaveHospitalSummary() {
                getLeaveHospitalSummaryApi(JSON.stringify(this.IHDiagnosisDetailParams)).then(response => {
                    if (response.data.code == 1) {
                        this.Cyxj = response.data.data[0]
                    }
                })
            },
            tabchange(index, title) {
                this.curIndex = index
                this.curTab = title
                this.swiper.slideTo(index,1000,false)
            },
            viewMore() {
                this.isShow = !this.isShow
                if (this.isShow) {
                    this.viewText = '收起查看'
                } else {
                    this.viewText = '明细查看'
                }
            },
            showCyzz() {
                this.popupVisible = true
            }
        },
        computed: {
            swiper() {
                return this.$refs.mySwiper.swiper
            }
        },
        mounted() {
            // current swiper instance
            // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
            this.swiper.slideTo(this.curIndex, 1000, false)
            //  swiper的滑动监听事件，获得当前index
            this.swiper.on('slideChange',()=>{
                this.curIndex = this.swiper.activeIndex
            })
        },
        components:{
            commonTable,
            jcReport,
            jyReport,
            tips
        },
        created() {
            this.init();
            this.getIHDiagnosisDetail();
            this.getLeaveHospitalSummary();
        }
    }
</script>
<style scoped lang="less">
    .fl{
        float:left;
    }
    .fr{
        float:right;
    }
    .top {
        background: #fff;
        .name {
            border-bottom: #DCDCDC solid 1px;
            font-size: 1.3rem;
            color: #969696;
            padding: 1.3rem 1rem;
            span {
                color: #323333;
            }
            .color {
                /* float: right; */
                color: #18B670;
                display: inline-block;
                width: 3.8rem;
                height: 1.5rem;
                line-height: 1.4rem;
                text-align: center;
                border: #18B670 solid 1px;
                font-weight: normal;
                font-size: 1rem;
                border-radius: 0.6rem;
                vertical-align: middle;
            }
            .color.cur {
                border: #FFA73B solid 1px;
                color: #FFA73B;
            }
            .fr {
                font-size: 1rem;
                color: #999;
                line-height: 1.5rem;
                img {
                    width: 0.6rem;
                    vertical-align: middle;
                }
            }
        }
        .jzinfo {
            display: flex;
            flex-wrap: wrap;
            padding: 1rem;
            border-bottom: #DCDCDC solid 1px;
            font-size: 1rem;
            color: #969696;
            padding-bottom: 0;
            p {
                width: 47%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin-bottom: 1rem;
                margin-right: 2%;
                span {
                    color: #333;
                }
            }
        }
        .jzfy {
            a{
                color: #333;
                font-size: 1rem;
            }

            border-bottom: #DCDCDC solid 1px;
            .item {
                overflow: hidden;
                padding: 0.6rem 1rem;
                font-size: 1rem;
                .left{
                    img {
                        width: 1.3rem;
                        margin-right: 0.6rem;
                    }
                }
                .right{
                    vertical-align: middle;
                    img {
                        margin-left: 0.6rem;
                    }
                }
                .colorblue {
                    color: #009CDF;
                    font-weight: bold;
                }
                .more {
                    color: #B4B4B4;
                }
                img {
                    vertical-align: middle;
                    width: 0.6rem;
                }
            }
            .item-detail {
                background: #F4F3F3;
                padding: 1rem;
                tr {
                    border-bottom: #D2D2D2 solid 1px;
                    color: #666;
                    font-size: 1rem;
                }
                tr:last-child {
                    border-bottom: none;
                }
                td {
                    background: url('~@/assets/images/point.png') left 1rem no-repeat;
                    background-size: 0.33rem;
                    padding: 0.5rem 0.8rem;
                }
                .induction {
                    color: #969696;
                    width: 60%;
                    text-align: center;
                    margin: 0 auto;
                }
            }
        }
        .fy{
            padding:1rem;
            p{
                margin-bottom:1rem;
                font-size: 1rem;
                color:#333;
                .colorgray{
                    color:#969696;
                }
                .colorblue{
                    color:#009CDF;
                }
            }
        }
        .summary {
            width: 100vw;
            height: 100vh;
            position: fixed;
            z-index: 999;
            background: rgba(0, 0, 0, 0.5);
            top: 0;
            left: 0;
            .content {
                width: 100%;
                background: #fff;
                position: absolute;
                bottom: 0;
                left: 0;
                border-radius: 0.3rem 0.3rem 0rem 0rem;
                padding: 1rem 1.6rem;
                height: 80vh;
                overflow-y: scroll;
                .title {
                    text-align: center;
                    font-size: 1rem;
                    color: #333;
                    border-bottom: #4AC7F5 solid 2px;
                    padding-bottom: 0.6rem;
                    a {
                        color: #666;
                        float: right;
                    }
                }
                .introduction{
                    border-top: #4AC7F5 solid 1px;
                    margin-top: 0.1rem;
                    padding-top: 0.6rem;
                    .item {
                        display: flex;
                        color: #969696;
                        margin-bottom: 0.6rem;
                        span {
                            color: #333;
                            margin-right: 1rem;
                        }
                        p {
                            width: 50%;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                    }
                }
                .detail {
                    border: #22A9E3 solid 1px;
                    background: #E8F6FB;
                    padding: 1rem;
                    span {
                        color: #009CDF;
                        font-weight: bold;
                        margin-right: 0.5rem;
                    }
                    p{
                        color: #666;
                        font-size: 1rem;
                        margin-bottom: 0.6rem;
                        line-height: 1.5rem;
                    }
                    .bj {
                        display: inline-block;
                        width: 0.3rem;
                        height: 0.8rem;
                        background: #009CDF;
                        vertical-align: middle;
                        margin-right: 0.2rem;
                    }
                }

            }
        }
    }

    .main {
        background: #fff;
        margin-top: 1rem;
        min-height: 60vh;
        .tab-title {
            display: flex;
            border-bottom: #DCDCDC solid 1px;
            padding: 1rem 1rem 0 1rem;
            .item {
                flex: 1;
                font-size: 1rem;
                color: #666;
                text-align: center;
                span {
                    display: inline-block;
                    padding-bottom: 0.5rem;
                }
                .cur {
                    color: #009CDF;
                    border-bottom: #009CDF solid 2px;
                }
            }
        }
        .tab-main {
            min-height: 10rem;
        }
        .yyxx {
            padding: 1.3rem 1rem;
        }
        .jjzl {
            padding: 1.3rem 2rem;
            p {
                font-size: 1rem;
                color: #666666;
                margin-bottom: 1rem;
                overflow: hidden;
                span {
                    float: left;
                }
                .tab{
                    color: #969696;
                    width:30%;
                    text-align: justify;
                }
                .text{
                    width: 70%;
                }
            }
            .color{
                color: #FF7768;
                span{
                    color: #FF7768;
                }
            }
        }
    }


</style>